<template>
  <div>
    <!-- 顶部 -->
    <van-nav-bar
      title="传智播客.黑马程序员Vue.js"
      style="background-color: #26a2ff; margin-bottom: 5px"
    />
    <!-- 头部 -->
    <div class="header">
      <van-nav-bar
        title="商品评论页"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <van-icon
            name="wap-home-o"
            size="18"
            @click="$router.push({ name: 'Home' })"
          />
        </template>
      </van-nav-bar>
    </div>

    <div class="headers">
      <h1 class="comment_title">提交评论</h1>
      <p class="back" @click="handleback()">返回</p>
    </div>
    <hr />
    <div class="comment">
      <van-field
        v-model="content"
        type="textarea"
        border
        placeholder="请输入评论内容"
      />
      <van-button class="comment_btn" type="info" @click="handleadd()"
        >发表</van-button
      >
      <hr />
    </div>
    <div class="comment_centent">
      <h1 class="comment_title">评论列表</h1>
      <p class="comment_centent_span">{{ this.total }}条评论</p>
    </div>
    <hr />
    <div
      class="comment_centent_list"
      v-for="item in commentList"
      :key="item.id"
    >
      <p class="comment_centent_list_top">{{ item.content }}</p>
      <div class="comment_centent_list_con">
        <p class="comment_centent_list_con_left">{{ item.user_name }}</p>
        <p>{{ item.add_time }}</p>
      </div>
    </div>
    <van-button class="comment_bom_btn" @click="handleMove()"
      >加载更多</van-button
    >
  </div>
</template>

<script>
import { getcomments } from "@/apis/newsInformation";
import { dateformat } from "@/utils/filteror";
import axios from "@/utils/request";
export default {
  // components: { Comment },
  data() {
    return {
      content: "",
      total: "",
      commentList: [],
      pageindex: 1,
    };
  },
  async mounted() {
    let datalist = await getcomments(this.$route.params.id);
    this.commentList = datalist.data.message;
    this.total = datalist.data.total;
  },
  filters: {
    dateformat,
  },
  methods: {
    async handleadd() {
      let id = this.$route.params.id;
      let data = { content: this.content };
      console.log(data);
      axios
        .post(
          `http://157.122.54.189:9073/api/postcomment/${id}`,
          `content=${this.content}`
        )
        .then(async (res) => {
          this.$toast.success(res.data.message);
          let datalist = await getcomments(this.$route.params.id);
          this.commentList = datalist.data.message;
          this.content = "";
        });
    },
    handleback() {
      this.$router.push({
        name: "GoodsDetial",
      });
    },
    async handleMove() {
      this.pageindex += 1;
      let pageCount = this.pageindex;
      let id = this.$route.params.id;
      axios
        .get(
          `http://157.122.54.189:9073/api/getcomments/${id}?pageindex=${pageCount}`
        )
        .then((res) => {
          if (res.data.message.length >= 1) {
            this.commentList = this.commentList.concat(res.data.message);
          } else {
            this.$toast.fail("没有更多");
          }
        })
        .catch((err) => {
          console.log(111);
        });
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__title {
  color: #fff;
}
.header {
  /deep/ .van-nav-bar__title {
    color: #1989fa;
  }

  /deep/ .van-nav-bar {
    background-color: #f7f7f7;
  }
}

/deep/.van-field__control {
  height: 100px;
  width: 340px;
  border: 1px solid #000;
  font-size: 20px;
  color: #333;
  padding: 5px;
}
.headers {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .comment_title {
    font-weight: 700;
    padding: 15px;
    font-size: 20px;
  }
}
.back {
  line-height: 60px;
  margin-right: 90px;
  color: #0f82ff;
}

.comment_btn {
  width: 340px;
  margin-left: 15px;
  color: #fff;
  font-size: 20px;
  border-radius: 5px;
}
.comment_centent {
  width: 340px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .comment_title {
    font-weight: 700;
    padding: 15px;
    font-size: 20px;
  }
}

.comment_centent_list {
  margin-top: 10px;
  padding: 0px 20px 10px;
  border-bottom: 1px solid #9a9a9a;
}
.comment_centent_list_top {
  font-size: 15px;
  color: darkgrey;
  margin-bottom: 10px;
}
.comment_centent_list_con {
  display: flex;
  justify-content: space-between;
  align-items: center;
  // margin-right: 120px;
}
.comment_centent_list_con_left {
  font-style: 15px;
  color: #5aafff;
}
.comment_centent_list_con_right {
  font-size: 15px;
  color: darkgrey;
}
.comment_bom_btn {
  margin-top: 20px;
  border: 1px solid red;
  color: red;
  width: 100%;
  font-size: 20px;
}
</style>
